<template>
  <div class="ResumeDetail">
    <el-row>
      <el-col :span="20" :offset="2">
        <div class="mr_top_bg" id="baseinfo">
          <img class="mr_headimg" id="userpic" src="../../assets/img/resume/resume_headpic.png" width="120" height="120"
               alt="头像"/>
          <img class="opa" src="../../assets/img/resume/resume_head_bg.png" width="1002" height="170"/>
          <img class="shadow" src="../../assets/img/resume/shadow_tx.png" width="119" height="119"/>
          <input type="file" class="mr_headfile" id="up_txpic" name="headPic"
                 onchange="myresumeCommon.utils.imageUpload(this,myresumeCommon.requestTargets.photoUpload,uploadPhoto.upSucc,uploadPhoto.upFail);"
                 title="支持jpg、jpeg、gif、png格式，文件小于10M"/>
        </div>
        <div class="mr_baseinfo">
          <h1>{{resumeForm.real_name}}</h1>
          <p class="mr_intro">{{resumeForm.evaluation}}</p>
          <p>
            <i class="fa fa-briefcase iconstyle"></i>{{resumeForm.end_education}} · {{resumeForm.marriage}}
          </p>
          <p>
            <i class="fa fa-user-o iconstyle"></i>
            {{resumeForm.sex}}  {{resumeForm.nation}}  {{resumeForm.political}}
          </p>
          <p>
            <span><i class="fa fa-phone iconstyle"></i>{{resumeForm.living}}</span>
            <span><i class="fa fa-envelope-o iconstyle"></i>{{resumeForm.qq}}</span>
          </p>
        </div>
        <div class="mr_educationinfo">
          <div class="mr_moudle_head">
            <div class="mr_titles">
              <span class="mr_title_l"></span>
              <span class="mr_title_c">教育背景</span>
              <span class="mr_title_r"></span>
            </div>
          </div>
          <div class="mr_content" v-for="(item,index) in Education" :key="index">
            <h4>{{item.school_info}}</h4>
            <p>{{formatterendEdu(item)}} · {{item.profession}}</p>
            <p>{{item.attend_date}} —— {{item.graduation_date}}</p>
          </div>
        </div>
        <div class="mr_educationinfo">
          <div class="mr_moudle_head">
            <div class="mr_titles">
              <span class="mr_title_l"></span>
              <span class="mr_title_c">求职意向</span>
              <span class="mr_title_r"></span>
            </div>
          </div>
          <div class="mr_content" v-for="(item,index) in drawWorkList" :key="index">
            <h4>{{item.position_name1}}</h4>
            <p>{{item.salary}} · {{item.work_type}}</p>
            <p>{{item.place_name}}</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="buttons" v-if="showButton===1">
      <ul>
        <li>
          <el-button type="primary" @click="sendInvitation()">发邀请函</el-button>
        </li>
        <li>
          <el-button type="primary" @click="sendInterview()">面试通知</el-button>
        </li>
      </ul>
    </div>
    <div class="buttons" v-if="showButton===2">
      <ul>
        <li>
          <el-button type="success" @click="companyResumeTrue()">同意</el-button>
        </li>
        <li>
          <el-button type="danger" @click="companyResumeFalse()">拒绝</el-button>
        </li>
      </ul>
    </div>
    <el-Dialog :visible.sync="interviewdialogVisible" size="tiny">
      <InvitationDialog :id="talentId" :type="'add'"
                        @stateChange="CloseDialog"></InvitationDialog>
    </el-Dialog>
    <el-Dialog :visible.sync="invitationdialogVisible" size="tiny">
      <InterviewDialog :id="talentId" :type="'add'"
                       @stateChange="CloseDialog"></InterviewDialog>
    </el-Dialog>
  </div>
</template>

<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import { changeSalaryStyle } from '../../assets/js/common.js'
  import Data from '../../assets/file/searchJob.json'
  import ShowImageCard from '@/components/common/ShowImageCard'
  import InvitationDialog from '@/components/recruitment/InvitationDialog'
  import InterviewDialog from '@/components/recruitment/InterviewDialog'

  export default {
    name: 'ResumeDetail',
    props: ['authority'],
    data () {
      return {
        url: '../../assets/img/resume/resume_headpic.png',
        config: {
          width: '120px',
          height: '120px'
        },
        talentId: '',
        resumeForm: {},
        Education: [],
        drawWorkList: [],
        Work: [],
        agreeState: '3',
        refuseState: '4',
        showButton: 0,//0无任何按钮，1公司向用户发邀请，2公司回复用户投递的简历
        interviewdialogVisible: false,
        invitationdialogVisible: false,
        ManagementRoleId: ''
      }
    },
    created () {
      this.talentId = this.authority.id
      this.ManagementRoleId = this.$store.state.talentExchange
      this.getResumeDetail()
      this.getManagement()
    },
    methods: {
      getManagement () {
        if (this.ManagementRoleId === '企业用户' && this.routerPath === '/index/talentexchange/companyresumedeliverydetails/' + this.authority.id + '/' + this.authority.Id) {
          this.showBtn = 2
        } else if (this.ManagementRoleId === '企业用户') {
          this.showBtn = 1
        }
      },
      getResumeDetail () {
        let _this = this
        let param = new Object()
        param.resume_id = _this.talentId
        postDataToServer('HM_RESUME_GET', param).then((data) => {
          if (data.status === 0) {
            if (data.data_list.personal_list[0].evaluation === undefined) {
              data.data_list.personal_list[0].evaluation = '未填写'
            }
            if (data.data_list.personal_list[0].portrait_url !== undefined) {
              _this.url = data.data_list.personal_list[0].portrait_url
            }
            _this.resumeForm = data.data_list.personal_list[0]
            _this.formatData()
            _this.Education = data.data_list.education_list
            data.data_list.objective_list.forEach((item) => {
              item = changeSalaryStyle(item)
              item.work_type = getStaticMapList('work_type', item.work_type)
            })
            _this.drawWorkList = data.data_list.objective_list
            _this.Work = data.data_list.works_list

          }
          else {
            _this.$message({
              message: data.message,
              type: 'error'
            })
            this.$router.go(-1)
          }
        })
      },
      formatData () {
        let _this = this
        // _this.resumeForm.real_name = `${_this.resumeForm.real_name.substring(0, 1)} **`;
        _this.resumeForm.sex = `${getStaticMapList('sex', _this.resumeForm.sex)}`
        _this.resumeForm.end_education = `${getStaticMapList('education', _this.resumeForm.end_education)}`
        _this.resumeForm.political = `${getStaticMapList('political', _this.resumeForm.political)}`
        _this.resumeForm.marriage = `${getStaticMapList('marriage', _this.resumeForm.marriage)}`
      },
      formatterendEdu (row) {
        return getStaticMapList('education', row.education)
      },
      sendInvitation () {
        this.invitationdialogVisible = true
      },
      sendInterview () {
        this.interviewdialogVisible = true
      },
      CloseDialog (state) {
        this.interviewdialogVisible = state
        this.invitationdialogVisible = state
      },
      //同意面试邀请
      companyResumeTrue () {
        let _this = this
        let params = new Object()
        params.id = this.talentId
        params.status = _this.agreeState
        postDataToServer('HM_RESUME_DELIVERY_COMPANY_EDIT', params).then((data) => {
          if (data.status === 0) {
            this.$message({
              showClose: true,
              message: '操作成功！'
            })
          } else {
            this.$message({
              showClose: true,
              message: data.message
            })
          }
        })
      },
      companyResumeFalse () {
        let _this = this
        let params = new Object()
        params.id = this.talentId
        params.status = _this.refuseState
        postDataToServer('HM_RESUME_DELIVERY_COMPANY_EDIT', params).then((data) => {
          if (data.status === 0) {
            this.$message({
              showClose: true,
              message: '操作成功！'
            })
          } else {
            this.$message({
              showClose: true,
              message: data.message
            })
          }
        })
      }
    },
    components: {
      ShowImageCard,
      InvitationDialog,
      InterviewDialog
    }
  }
</script>

<style scoped>
  .TalentInfo {
    margin: 2em;
  }

  /*简历图片展示样式*/
  .mr_top_bg {
    position: relative;
    height: 135px;
    background: #fafafa url(../../assets/img/resume/resume_headpic.png) center top no-repeat;
    z-index: 2;
    padding-top: 3.5em;
  }

  .mr_top_bg .mr_headimg {
    background-color: #fafafa;
  }

  img {
    border: none;
  }

  .mr_top_bg img,
  .mr_top_bg input {
    position: absolute;
    left: 475px;
    top: 39px;
    width: 129px;
    height: 129px;
  }

  .mr_top_bg .opa {
    left: 0;
    top: 0;
    width: 65%;
    height: 170px;
    margin-left: 12em;
  }

  .mr_top_bg .shadow {
    display: none;
    left: 506px;
    top: 45px;
    width: 116px;
    height: 116px;
  }

  .mr_top_bg input {
    opacity: 0;
    cursor: pointer;
    border-radius: 50%;
  }

  /*个人信息样式*/
  .buttons {
    position: fixed;
    right: 9em;
    top: 17em;
    z-index: 2;
  }

  .buttons li {
    list-style: none;
    margin: 2em 1em;
  }

  .buttons li button {
    width: 120px;
  }

  .mr_baseinfo {
    background-color: #fafafa;
    text-align: center;
    padding-bottom: 0.8em;
  }

  .mr_baseinfo h1 {
    font-weight: 400;
    color: #333333;
  }

  .mr_baseinfo p {
    margin: 0.8em auto;
    color: #636363;
  }

  .mr_baseinfo .mr_intro {
    margin-bottom: 1.3em;
    font-size: 18px;
    color: #444;
  }

  .mr_baseinfo span {
    margin: 0px 15px;
  }

  .iconstyle {
    color: #999;
    margin-right: 15px;
  }

  /***教育背景样式***/
  .mr_educationinfo {
    background-color: #fafafa;
    text-align: center;
    padding-bottom: 2em;
  }

  /*中间标题的样式*/
  .mr_head_l {
    float: left;
  }

  .mr_titles {
    position: relative;
  }

  .mr_titles .mr_title_l {
    width: 360px;
    height: 0;
    border-top: 1px solid #ededed;
  }

  .mr_titles .mr_title_c {
    font-size: 18px;
    padding: 6px 24px;
    text-align: center;
    background-color: #eee;
    -moz-border-radius: 26px;
    -webkit-border-radius: 26px;
    border-radius: 26px;
    margin: 0 13px;
  }

  .mr_titles .mr_title_r {
    width: 360px;
    height: 0;
    border-top: 1px solid #ededed;
  }

  .mr_titles span {
    vertical-align: middle;
    display: inline-block;
  }

  .mr_moudle_head {
    margin-bottom: 23px;
    margin: 0 auto;
    margin: 0em auto;
  }

  /*中间内容样式*/
  .mr_content {
    margin: 0em 4em;
    padding: 2em 0em 0em;
  }

  .mr_content h4 {
    color: #666;
    font-size: 18px;
  }

  .mr_content p {
    color: #999;
    margin: 10px;
  }
</style>
